<template>
  <view class="trust-deception-game">
    <!-- 游戏状态栏 -->
    <view class="game-status-bar">
      <view class="round-info">
        <text class="round-text">第{{ currentRound }}轮</text>
        <text class="phase-text">{{ getPhaseText() }}</text>
      </view>
      <view class="timer-info" v-if="gamePhase === 'play'">
        <text class="timer-text">{{ timeRemaining }}秒</text>
      </view>
    </view>
    
    <!-- 玩家信息区域 -->
    <view class="players-info">
      <view 
        v-for="player in players" 
        :key="player.id"
        class="player-info"
        :class="{ active: player.id === currentPlayerId, eliminated: player.eliminated }"
      >
        <view class="player-avatar">
          <image :src="player.avatar" class="avatar-img" mode="aspectFill"></image>
          <view class="player-status" v-if="player.eliminated">
            <text class="status-text">出局</text>
          </view>
        </view>
        <view class="player-details">
          <text class="player-name">{{ player.name }}</text>
          <view class="player-stats">
            <text class="stat-item">💰{{ player.gold }}</text>
            <text class="stat-item">❤️{{ player.reputation }}</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 当前玩家手牌 -->
    <view class="current-player-hand" v-if="gamePhase === 'play' && currentPlayer">
      <view class="hand-header">
        <text class="hand-title">{{ currentPlayer.name }}的手牌</text>
        <text class="hand-count">{{ currentPlayer.hand.length }}张</text>
      </view>
      <view class="cards-container">
        <view 
          v-for="(card, index) in currentPlayer.hand" 
          :key="index"
          class="card-item"
          :class="[card.type, { selected: selectedCards.includes(index) }]"
          @click="selectCard(index)"
        >
          <view class="card-icon">{{ card.icon }}</view>
          <text class="card-name">{{ card.name }}</text>
        </view>
      </view>
    </view>
    
    <!-- 出牌区域 -->
    <view class="play-area" v-if="gamePhase === 'play' && currentPlayer">
      <view class="played-cards">
        <text class="area-title">已出卡牌</text>
        <view class="cards-display">
          <view 
            v-for="(card, index) in playedCards" 
            :key="index"
            class="played-card"
            :class="card.type"
          >
            <view class="card-icon">{{ card.icon }}</view>
            <text class="card-name">{{ card.name }}</text>
          </view>
        </view>
      </view>
      
      <view class="play-actions">
        <button 
          class="action-btn play-btn"
          :disabled="selectedCards.length === 0"
          @click="playSelectedCards"
        >
          出牌 ({{ selectedCards.length }}张)
        </button>
        <button 
          class="action-btn pass-btn"
          @click="passTurn"
        >
          跳过
        </button>
      </view>
    </view>
    
    <!-- 投注阶段 -->
    <view class="betting-phase" v-if="gamePhase === 'betting'">
      <view class="betting-header">
        <text class="betting-title">投注阶段</text>
        <text class="betting-subtitle">选择是否投注，投注金额将进入奖池</text>
      </view>
      
      <view class="betting-options">
        <view 
          v-for="player in activePlayers" 
          :key="player.id"
          class="betting-player"
          v-if="player.id !== currentPlayerId"
        >
          <view class="player-info">
            <image :src="player.avatar" class="player-avatar" mode="aspectFill"></image>
            <text class="player-name">{{ player.name }}</text>
          </view>
          <view class="betting-controls">
            <button 
              class="bet-btn"
              :class="{ active: playerBets[player.id] }"
              @click="toggleBet(player.id)"
            >
              {{ playerBets[player.id] ? '已投注' : '投注' }}
            </button>
            <input 
              v-if="playerBets[player.id]"
              type="number"
              class="bet-amount"
              v-model="betAmounts[player.id]"
              :placeholder="`最多${player.gold}`"
              :max="player.gold"
            />
          </view>
        </view>
      </view>
      
      <view class="betting-actions">
        <button class="action-btn confirm-betting" @click="confirmBetting">
          确认投注
        </button>
      </view>
    </view>
    
    <!-- 质疑阶段 -->
    <view class="challenge-phase" v-if="gamePhase === 'challenge'">
      <view class="challenge-header">
        <text class="challenge-title">质疑阶段</text>
        <text class="challenge-subtitle">其他玩家可以质疑出牌玩家的诚实性</text>
      </view>
      
      <view class="challenge-options">
        <view 
          v-for="player in activePlayers" 
          :key="player.id"
          class="challenge-player"
          v-if="player.id !== currentPlayerId"
        >
          <view class="player-info">
            <image :src="player.avatar" class="player-avatar" mode="aspectFill"></image>
            <text class="player-name">{{ player.name }}</text>
          </view>
          <button 
            class="challenge-btn"
            :class="{ active: challenges[player.id] }"
            @click="toggleChallenge(player.id)"
          >
            {{ challenges[player.id] ? '已质疑' : '质疑' }}
          </button>
        </view>
      </view>
      
      <view class="challenge-actions">
        <button class="action-btn resolve-challenge" @click="resolveChallenge">
          结算质疑
        </button>
      </view>
    </view>
    
    <!-- 游戏结果 -->
    <view class="game-result" v-if="gamePhase === 'result'">
      <view class="result-content">
        <text class="result-title">轮次结果</text>
        <view class="result-details">
          <text class="result-text">{{ resultMessage }}</text>
          <view class="reward-distribution">
            <text class="distribution-title">奖励分配</text>
            <view 
              v-for="player in players" 
              :key="player.id"
              class="player-reward"
              v-if="player.rewards > 0"
            >
              <text class="player-name">{{ player.name }}</text>
              <text class="reward-amount">+{{ player.rewards }}💰</text>
            </view>
          </view>
        </view>
        <button class="action-btn next-round" @click="nextRound">
          下一轮
        </button>
      </view>
    </view>
    
    <!-- 游戏结束 -->
    <view class="game-end" v-if="gamePhase === 'ended'">
      <view class="end-content">
        <text class="end-title">游戏结束</text>
        <view class="final-ranking">
          <text class="ranking-title">最终排名</text>
          <view 
            v-for="(player, index) in finalRanking" 
            :key="player.id"
            class="ranking-item"
          >
            <text class="rank">第{{ index + 1 }}名</text>
            <text class="player-name">{{ player.name }}</text>
            <text class="final-gold">{{ player.gold }}💰</text>
          </view>
        </view>
        <button class="action-btn restart-game" @click="restartGame">
          重新开始
        </button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'TrustDeceptionGame',
  data() {
    return {
      // 游戏状态
      gamePhase: 'play', // play, betting, challenge, result, ended
      currentRound: 1,
      maxRounds: 5,
      timeRemaining: 30,
      currentPlayerId: 1,
      
      // 玩家数据
      players: [
        {
          id: 1,
          name: '玩家1',
          avatar: '/static/logo.png',
          gold: 100,
          reputation: 100,
          hand: [],
          eliminated: false,
          rewards: 0
        },
        {
          id: 2,
          name: 'AI玩家',
          avatar: '/static/logo.png',
          gold: 100,
          reputation: 100,
          hand: [],
          eliminated: false,
          rewards: 0
        }
      ],
      
      // 游戏数据
      selectedCards: [],
      playedCards: [],
      playerBets: {},
      betAmounts: {},
      challenges: {},
      resultMessage: '',
      finalRanking: []
    }
  },
  computed: {
    currentPlayer() {
      return this.players.find(p => p.id === this.currentPlayerId)
    },
    activePlayers() {
      return this.players.filter(p => !p.eliminated)
    }
  },
  methods: {
    getPhaseText() {
      const phaseTexts = {
        'play': '出牌阶段',
        'betting': '投注阶段',
        'challenge': '质疑阶段',
        'result': '结算阶段',
        'ended': '游戏结束'
      }
      return phaseTexts[this.gamePhase] || '未知阶段'
    },
    
    // 初始化游戏
    initGame() {
      this.dealCards()
      this.currentPlayerId = 1
      this.gamePhase = 'play'
      this.timeRemaining = 30
    },
    
    // 发牌
    dealCards() {
      this.players.forEach(player => {
        player.hand = this.generateHand(5)
      })
    },
    
    // 生成手牌
    generateHand(count) {
      const cards = []
      for (let i = 0; i < count; i++) {
        const isTrust = Math.random() < 0.5
        cards.push({
          type: isTrust ? 'trust' : 'deception',
          icon: isTrust ? '⚪' : '⚫',
          name: isTrust ? '信任' : '欺骗'
        })
      }
      return cards
    },
    
    // 选择卡牌
    selectCard(index) {
      if (this.selectedCards.includes(index)) {
        this.selectedCards = this.selectedCards.filter(i => i !== index)
      } else {
        this.selectedCards.push(index)
      }
    },
    
    // 出牌
    playSelectedCards() {
      if (this.selectedCards.length === 0) return
      
      // 将选中的卡牌移到已出卡牌区域
      this.playedCards = this.selectedCards.map(index => this.currentPlayer.hand[index])
      
      // 从手牌中移除已出的卡牌
      this.currentPlayer.hand = this.currentPlayer.hand.filter((_, index) => !this.selectedCards.includes(index))
      
      // 清空选择
      this.selectedCards = []
      
      // 进入投注阶段
      this.gamePhase = 'betting'
      this.initBetting()
    },
    
    // 跳过回合
    passTurn() {
      this.nextPlayer()
    },
    
    // 初始化投注
    initBetting() {
      this.playerBets = {}
      this.betAmounts = {}
      this.activePlayers.forEach(player => {
        if (player.id !== this.currentPlayerId) {
          this.playerBets[player.id] = false
          this.betAmounts[player.id] = 0
        }
      })
    },
    
    // 切换投注
    toggleBet(playerId) {
      this.playerBets[playerId] = !this.playerBets[playerId]
      if (!this.playerBets[playerId]) {
        this.betAmounts[playerId] = 0
      }
    },
    
    // 确认投注
    confirmBetting() {
      // 处理投注逻辑
      let totalBet = 0
      this.activePlayers.forEach(player => {
        if (player.id !== this.currentPlayerId && this.playerBets[player.id]) {
          const betAmount = Math.min(this.betAmounts[player.id] || 0, player.gold)
          player.gold -= betAmount
          totalBet += betAmount
        }
      })
      
      // 进入质疑阶段
      this.gamePhase = 'challenge'
      this.initChallenge()
    },
    
    // 初始化质疑
    initChallenge() {
      this.challenges = {}
      this.activePlayers.forEach(player => {
        if (player.id !== this.currentPlayerId) {
          this.challenges[player.id] = false
        }
      })
    },
    
    // 切换质疑
    toggleChallenge(playerId) {
      this.challenges[playerId] = !this.challenges[playerId]
    },
    
    // 结算质疑
    resolveChallenge() {
      const challengers = Object.keys(this.challenges).filter(id => this.challenges[id])
      
      if (challengers.length === 0) {
        // 无人质疑，出牌玩家获得奖励
        this.resultMessage = '无人质疑，出牌玩家获得奖励'
        this.distributeRewards()
      } else {
        // 有人质疑，检查出牌是否诚实
        const isHonest = this.checkHonesty()
        
        if (isHonest) {
          // 出牌玩家诚实，质疑者失败
          this.resultMessage = '出牌玩家诚实，质疑者失败'
          this.punishChallengers(challengers)
        } else {
          // 出牌玩家欺骗，质疑者成功
          this.resultMessage = '出牌玩家欺骗，质疑者成功'
          this.rewardChallengers(challengers)
          this.punishPlayer()
        }
      }
      
      this.gamePhase = 'result'
    },
    
    // 检查诚实性
    checkHonesty() {
      // 如果所有出牌都是信任卡，则诚实
      return this.playedCards.every(card => card.type === 'trust')
    },
    
    // 奖励质疑者
    rewardChallengers(challengers) {
      const rewardPerChallenger = Math.floor(50 / challengers.length)
      challengers.forEach(id => {
        const player = this.players.find(p => p.id == id)
        player.gold += rewardPerChallenger
        player.rewards += rewardPerChallenger
      })
    },
    
    // 惩罚质疑者
    punishChallengers(challengers) {
      challengers.forEach(id => {
        const player = this.players.find(p => p.id == id)
        player.reputation -= 10
        if (player.reputation <= 0) {
          player.eliminated = true
        }
      })
    },
    
    // 惩罚出牌玩家
    punishPlayer() {
      this.currentPlayer.reputation -= 20
      if (this.currentPlayer.reputation <= 0) {
        this.currentPlayer.eliminated = true
      }
    },
    
    // 分配奖励
    distributeRewards() {
      // 简化奖励分配逻辑
      this.currentPlayer.gold += 20
      this.currentPlayer.rewards += 20
    },
    
    // 下一轮
    nextRound() {
      this.currentRound++
      this.playedCards = []
      this.selectedCards = []
      
      if (this.currentRound > this.maxRounds || this.activePlayers.length <= 1) {
        this.endGame()
      } else {
        this.nextPlayer()
        this.gamePhase = 'play'
        this.timeRemaining = 30
      }
    },
    
    // 下一个玩家
    nextPlayer() {
      const activePlayerIds = this.activePlayers.map(p => p.id)
      const currentIndex = activePlayerIds.indexOf(this.currentPlayerId)
      const nextIndex = (currentIndex + 1) % activePlayerIds.length
      this.currentPlayerId = activePlayerIds[nextIndex]
    },
    
    // 结束游戏
    endGame() {
      this.finalRanking = [...this.players]
        .filter(p => !p.eliminated)
        .sort((a, b) => b.gold - a.gold)
      
      this.gamePhase = 'ended'
    },
    
    // 重新开始
    restartGame() {
      this.players.forEach(player => {
        player.gold = 100
        player.reputation = 100
        player.eliminated = false
        player.rewards = 0
      })
      
      this.currentRound = 1
      this.initGame()
    }
  },
  
  mounted() {
    this.initGame()
  }
}
</script>

<style scoped>
.trust-deception-game {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20rpx;
  gap: 20rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
}

.game-status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16rpx 20rpx;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 12rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.round-text {
  font-size: 18rpx;
  font-weight: bold;
  color: #333;
}

.phase-text {
  font-size: 14rpx;
  color: #666;
}

.timer-info {
  padding: 8rpx 16rpx;
  background: rgba(255, 59, 48, 0.1);
  border-radius: 20rpx;
  border: 1rpx solid rgba(255, 59, 48, 0.3);
}

.timer-text {
  font-size: 16rpx;
  font-weight: bold;
  color: #ff3b30;
}

.players-info {
  display: flex;
  gap: 16rpx;
  flex-wrap: wrap;
}

.player-info {
  display: flex;
  align-items: center;
  gap: 12rpx;
  padding: 16rpx;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 12rpx;
  border: 2rpx solid transparent;
  transition: all 0.3s ease;
}

.player-info.active {
  border-color: #007bff;
  box-shadow: 0 4rpx 12rpx rgba(0, 123, 255, 0.3);
}

.player-info.eliminated {
  opacity: 0.5;
  background: rgba(220, 53, 69, 0.1);
}

.player-avatar {
  width: 50rpx;
  height: 50rpx;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
}

.avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.player-status {
  position: absolute;
  top: -4rpx;
  right: -4rpx;
  background: #dc3545;
  color: white;
  padding: 2rpx 6rpx;
  border-radius: 8rpx;
  font-size: 10rpx;
}

.player-details {
  display: flex;
  flex-direction: column;
  gap: 4rpx;
}

.player-name {
  font-size: 16rpx;
  font-weight: bold;
  color: #333;
}

.player-stats {
  display: flex;
  gap: 8rpx;
}

.stat-item {
  font-size: 12rpx;
  color: #666;
  background: rgba(0, 123, 255, 0.1);
  padding: 2rpx 6rpx;
  border-radius: 8rpx;
}

.current-player-hand {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 16rpx;
  padding: 20rpx;
}

.hand-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}

.hand-title {
  font-size: 18rpx;
  font-weight: bold;
  color: #333;
}

.hand-count {
  font-size: 14rpx;
  color: #666;
  background: rgba(0, 123, 255, 0.1);
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
}

.cards-container {
  display: flex;
  flex-wrap: wrap;
  gap: 12rpx;
}

.card-item {
  width: 120rpx;
  height: 160rpx;
  border-radius: 12rpx;
  padding: 12rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rpx;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
}

.card-item:active {
  transform: scale(0.95);
}

.card-item.selected {
  border: 3rpx solid #007bff;
  box-shadow: 0 4rpx 12rpx rgba(0, 123, 255, 0.3);
}

.card-item.trust {
  background: linear-gradient(135deg, rgba(76, 217, 100, 0.1), rgba(76, 217, 100, 0.2));
  border: 2rpx solid rgba(76, 217, 100, 0.3);
}

.card-item.deception {
  background: linear-gradient(135deg, rgba(255, 59, 48, 0.1), rgba(255, 59, 48, 0.2));
  border: 2rpx solid rgba(255, 59, 48, 0.3);
}

.card-icon {
  font-size: 32rpx;
  margin-bottom: 4rpx;
}

.card-name {
  font-size: 14rpx;
  font-weight: bold;
  color: #333;
  text-align: center;
}

.play-area {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 16rpx;
  padding: 20rpx;
}

.played-cards {
  margin-bottom: 20rpx;
}

.area-title {
  font-size: 16rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 12rpx;
}

.cards-display {
  display: flex;
  gap: 12rpx;
  flex-wrap: wrap;
}

.played-card {
  width: 100rpx;
  height: 140rpx;
  border-radius: 8rpx;
  padding: 8rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4rpx;
}

.played-card.trust {
  background: linear-gradient(135deg, rgba(76, 217, 100, 0.2), rgba(76, 217, 100, 0.3));
  border: 2rpx solid rgba(76, 217, 100, 0.5);
}

.played-card.deception {
  background: linear-gradient(135deg, rgba(255, 59, 48, 0.2), rgba(255, 59, 48, 0.3));
  border: 2rpx solid rgba(255, 59, 48, 0.5);
}

.play-actions {
  display: flex;
  gap: 16rpx;
  justify-content: center;
}

.action-btn {
  padding: 16rpx 32rpx;
  border-radius: 12rpx;
  font-size: 16rpx;
  font-weight: bold;
  border: none;
  transition: all 0.3s ease;
  cursor: pointer;
}

.action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.play-btn {
  background: linear-gradient(135deg, #007bff, #0056b3);
  color: white;
}

.pass-btn {
  background: linear-gradient(135deg, #6c757d, #5a6268);
  color: white;
}

.betting-phase,
.challenge-phase,
.game-result,
.game-end {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 16rpx;
  padding: 20rpx;
}

.betting-title,
.challenge-title,
.result-title,
.end-title {
  font-size: 20rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 8rpx;
}

.betting-subtitle,
.challenge-subtitle {
  font-size: 14rpx;
  color: #666;
  margin-bottom: 20rpx;
}

.betting-player,
.challenge-player {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16rpx;
  background: rgba(0, 123, 255, 0.1);
  border-radius: 12rpx;
  margin-bottom: 12rpx;
}

.betting-controls {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.bet-btn,
.challenge-btn {
  padding: 8rpx 16rpx;
  border-radius: 8rpx;
  font-size: 14rpx;
  border: 1rpx solid #007bff;
  background: transparent;
  color: #007bff;
  transition: all 0.3s ease;
}

.bet-btn.active,
.challenge-btn.active {
  background: #007bff;
  color: white;
}

.bet-amount {
  width: 120rpx;
  padding: 6rpx 12rpx;
  border: 1rpx solid #ddd;
  border-radius: 8rpx;
  font-size: 14rpx;
}

.confirm-betting,
.resolve-challenge,
.next-round,
.restart-game {
  background: linear-gradient(135deg, #28a745, #20c997);
  color: white;
  width: 100%;
  margin-top: 20rpx;
}

.result-details {
  margin: 20rpx 0;
}

.result-text {
  font-size: 16rpx;
  color: #333;
  margin-bottom: 16rpx;
}

.reward-distribution {
  background: rgba(0, 123, 255, 0.1);
  border-radius: 12rpx;
  padding: 16rpx;
}

.distribution-title {
  font-size: 16rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 12rpx;
}

.player-reward {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8rpx 0;
  border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
}

.player-reward:last-child {
  border-bottom: none;
}

.reward-amount {
  font-size: 14rpx;
  font-weight: bold;
  color: #28a745;
}

.final-ranking {
  margin: 20rpx 0;
}

.ranking-title {
  font-size: 18rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 16rpx;
}

.ranking-item {
  display: flex;
  align-items: center;
  gap: 16rpx;
  padding: 12rpx;
  background: rgba(0, 123, 255, 0.1);
  border-radius: 12rpx;
  margin-bottom: 8rpx;
}

.rank {
  font-size: 16rpx;
  font-weight: bold;
  color: #007bff;
  min-width: 80rpx;
}

.final-gold {
  font-size: 14rpx;
  font-weight: bold;
  color: #28a745;
  margin-left: auto;
}

/* 移动端优化 */
@media (max-width: 768rpx) {
  .trust-deception-game {
    padding: 12rpx;
    gap: 12rpx;
  }
  
  .players-info {
    flex-direction: column;
    gap: 8rpx;
  }
  
  .player-info {
    padding: 12rpx;
  }
  
  .player-avatar {
    width: 40rpx;
    height: 40rpx;
  }
  
  .player-name {
    font-size: 14rpx;
  }
  
  .stat-item {
    font-size: 10rpx;
  }
  
  .card-item {
    width: 100rpx;
    height: 140rpx;
    padding: 8rpx;
  }
  
  .card-icon {
    font-size: 24rpx;
  }
  
  .card-name {
    font-size: 12rpx;
  }
  
  .action-btn {
    padding: 12rpx 24rpx;
    font-size: 14rpx;
  }
  
  .betting-player,
  .challenge-player {
    padding: 12rpx;
  }
  
  .bet-btn,
  .challenge-btn {
    padding: 6rpx 12rpx;
    font-size: 12rpx;
  }
  
  .bet-amount {
    width: 100rpx;
    padding: 4rpx 8rpx;
    font-size: 12rpx;
  }
}
</style>

